<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>盛筑OA系统</title>
    <script src="../static/kaige/js/szload.js"></script>
    <style>
        body {
            overflow-x: hidden;
        }

        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .tqbg {
            background-color: #0f5ba3;
            /* 浏览器不支持时显示 */
            background-image: linear-gradient(#498cf8, #0a448f);
            border-radius: 12px;
        }

        .k-ul {
            display: block;
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .k-ul li {
            display: block;
            position: relative;
        }

        .k-ul li span {
            height: 30px;
            line-height: 30px;
        }

        .k-ul li span:nth-child(1) {
            font-size: 14px;
            width: 70%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            display: block;
        }

        .k-ul li span:nth-child(2) {
            position: absolute;
            top: 0;
            right: 60px;
            display: block;
            color: #444;
            font-size: 12px;
        }

        .k-ul li span:nth-child(3) {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            color: #999;
            font-size: 12px;
        }

        .layui-card-header span {
            position: absolute;
            top: 15px;
            right: 10px;
            cursor: pointer;
        }

        body .layui-timeline-content {
            padding-left: 20px;
        }

        body .layui-badge {
            padding: 0 6px;
        }

        .layui-card {
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        }

        body .layui-laydate-main {
            width: calc(20vW);
        }

        body .layui-laydate-content {
            margin: 0 auto;
        }

        body .layui-laydate-content td,
        body .layui-laydate-content th {
            width: 44px;
        }
    </style>

</head>

<body>

    <div class="kaige-body">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md9">
                        <div class="layui-carousel" id="test10">
                            <div carousel-item="">
                                <div style="width: 100%; height: 100%">
                                    <img src="../static/img/oa-ban1.jpg" style="width: 100%; height: 100%">
                                </div>
                                <div style="width: 100%; height: 100%">
                                    <img src="../static/img/oa-ban2.jpg" style="width: 100%; height: 100%">
                                </div>
                                <div style="width: 100%; height: 100%">
                                    <img src="../static/img/oa-ban3.jpg" style="width: 100%; height: 100%">
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space10" style="margin-top: 10px;">
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header"><i class="layui-icon layui-icon-auz"></i> 待我审批 <span
                                            class="layui-badge layui-bg-blue">更多</span></div>
                                    <div class="layui-card-body">
                                        <ul class="k-ul">
                                            <li><span>李克强同巴基斯坦总理夏巴兹通电话</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>经济下行压力加大 高质量发展大势未变</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>各地疫情防控政策措施专栏 | 政务公开交流</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>"携手行动"促大中小企业融通创新</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>部署重点工程项目百项堵点疏解行动</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>王勇主持召开国务院残工委全体会议</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>李克强总理在江西考察 | 答中外记者问</span><span>管理员</span><span>05-16</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header"><i class="layui-icon layui-icon-notice"></i> 通知公告
                                        <span class="layui-badge layui-bg-blue">更多</span></div>
                                    <div class="layui-card-body">
                                        <ul class="k-ul">
                                            <li><span>泉州打击经济犯罪 去年破案2080起
                                                    挽回损失10亿元</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>双品网购节期间 泉州网络零售额达116.6亿元</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>食品饮料与生物医药产业计划年度新增投资26.8亿元</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>强产业兴城市 抓项目促发展 泉州举行媒体通气会</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>新华社点赞泉州 助企纾困“新招”</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>泉州市下达补充耕地任务3400亩</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>2022年高校毕业生服务社区计划启动</span><span>管理员</span><span>05-16</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline" id="test-n1" style="width: calc(20vW);"></div>
                    </div>
                </div>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md9">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header"><i class="layui-icon layui-icon-release"></i> 公司资讯
                                        <span class="layui-badge layui-bg-blue">更多</span></div>
                                    <div class="layui-card-body">
                                        <ul class="k-ul">
                                            <li><span>泉州市2022年电子商务高质量发展补助条件明确</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>石狮出台全省首个电商行业人才评定标准 可获奖励</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>石狮：好心办坏事 给他人造成损害同样要担责</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>泉州永春县公安局最新通告！发现马上举报！</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>漳州：超4万困难群体“两病”100%报销</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>一夜降至16°C！泉州今明两天以阵雨天气为主</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>台湾学生可凭台湾“统测”成绩 申请厦门三所高校</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>厦门海关出台三方面16项措施 促进外贸保稳提质</span><span>管理员</span><span>05-16</span>
                                            </li>
                                            <li><span>丰泽：谋篇布局提速发展招商项目全面发力</span><span>管理员</span><span>05-16</span></li>
                                            <li><span>南安：驾驶员一脚油门 撞倒30米护栏损失近万元</span><span>管理员</span><span>05-16</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="grid-demo grid-demo-bg1"
                                    style="position:absolute; z-index:999;width:calc(67.3vW);top:6px;left:6px; border:1px solid transparent;">
                                    <div class="layui-carousel" id="test11">
                                        <div carousel-item="">
                                            <div style="width: 100%; height: 100%">
                                                <img src="../static/img/oa-2ban1.jpg" style="width: 100%; height: 100%">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="layui-col-md3">

                </div> -->
                </div>
            </div>
            <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="tqbg">
                            <!--https://widget.qweather.com/-->
                            <div id="he-plugin-standard"></div>
                            <script>
                                WIDGET = {
                                    "CONFIG": {
                                        "layout": "2",
                                        "width": 230,
                                        "height": 265,
                                        "background": "5",
                                        "dataColor": "FFFFFF",
                                        "key": "f82c91cb2ef64ed0a1cc2408412a37f6"
                                    }
                                }
                            </script>
                            <script
                                src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
                        </div>
                    </div>
                    <div class="layui-col-md12" style="margin-top:10px ;">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-pie-chart"></i> 我的考勤
                                <span class="layui-badge layui-bg-blue">更多</span>
                            </div>
                            <div class="layui-card-body">
                                <div style="width:230px;margin-left: -10px;">
                                    <canvas id="canvas"></canvas>
                                </div>
                                <div class="layui-btn-container" style="width: 230px; margin-top:10px">
                                    <button type="button" class="layui-btn layui-bg-green">上班签到</button>
                                    <button type="button" class="layui-btn layui-bg-orange">下班签退</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        load_init_js([
            szoapcpath + '/static/lib/chartjs/Chart.bundle.js',
            szoapcpath + '/static/lib/chartjs/utils.js',
        ], function () {
            layui.use(['carousel', 'form', 'laydate', 'slider'], function () {
                var carousel = layui.carousel
                    , laydate = layui.laydate
                    , slider = layui.slider
                    , form = layui.form;

                //图片轮播
                carousel.render({
                    elem: '#test10'
                    , width: '100%'
                    , height: '225px'
                    , interval: 5000
                });
                carousel.render({
                    elem: '#test11'
                    , width: '100%'
                    , height: '360px'
                    , interval: 5000
                });

                laydate.render({
                    elem: '#test-n1'
                    , position: 'static'
                    // ,theme: 'molv'
                    , showBottom: false
                    , ready: function (date) {
                        $("#test-n1").find('.layui-laydate-static').append('<hr><ul class="layui-timeline" style="width:250px;margin:10px auto;">\
  <li class="layui-timeline-item">\
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>\
    <div class="layui-timeline-content layui-text">\
        <div class="layui-timeline-title"><span class="layui-badge layui-bg-blue">17:00</span></div>\
      <p>\
        17号给某某公司的马老板打电话\
      </p>\
    </div>\
  </li>\
  <li class="layui-timeline-item">\
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>\
    <div class="layui-timeline-content layui-text">\
        <div class="layui-timeline-title"><span class="layui-badge layui-bg-blue">14:00</span></div>\
      <p>26号约某某公司采购部经理签约</p>\
    </div>\
  </li>\
  <li class="layui-timeline-item">\
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>\
    <div class="layui-timeline-content layui-text">\
        <div class="layui-timeline-title"><span class="layui-badge layui-bg-blue">09:00</span></div>\
      <p>\
        29号给某某公司的陈某致电洽谈合同\
      </p>\
    </div>\
  </li>\
  <li class="layui-timeline-item">\
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>\
    <div class="layui-timeline-content layui-text">\
      <div class="layui-timeline-title"><span class="layui-badge layui-bg-blue">更多</span></div>\
    </div>\
  </li>\
</ul>');
                    }
                });

                //图表start
                var chartData = {
                    labels: ['迟到', '请假', '外出', '出差', '早退'],
                    datasets: [{
                        type: 'bar',
                        label: '次数',
                        backgroundColor: window.chartColors.blue,
                        data: [1, 5, 12, 9, 3],
                        borderWidth: 0
                    }]

                };
                //window.onload = function() {
                var ctx = document.getElementById('canvas').getContext('2d');
                window.myMixedChart = new Chart(ctx, {
                    type: 'bar',
                    data: chartData,
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        title: { display: false, text: '我的考勤' },
                        tooltips: { mode: 'index', intersect: false }
                    }
                });
                //};

                // document.getElementById('randomizeData').addEventListener('click', function() {
                // 	chartData.datasets.forEach(function(dataset) {
                // 		dataset.data = dataset.data.map(function() {
                // 			return randomScalingFactor();
                // 		});
                // 	});
                // 	window.myMixedChart.update();
                // });
                //图表end

            });
        });
    </script>

</body>

</html>